export default {
    data: {
        ctx: null,
        ctxBottom: null,
        slice: Math.PI*3/200,
        num: 0,
        text:'0',
        routeInside:null,
        routeOutside:null,
        state: false,
    },
    props: {
        cRadius: {
            default: 100
        },
        scale: {
            default: 1.0
        },
        lineWidth: {
            default: 10,
        },
        cRate: {
            default: 0,
        },
        cColor: {
            default: '#00FF7F',
        },
        bgColorOut: {
            default: '#FFF89d',
        },
        bgColorIn: {
            default: '#FFF',
        },
    },

    onLayoutReady() {
//        this.$watch('cRate','onRateChange'); //当时父组件改变了cRate时监听它
//        this.$watch('scale','changeCircle');
        this.initCanvas();
    },
    onHide(){
        this.ctx.clearRect(0,0,2*parseInt(this.cRadius),2*parseInt(this.cRadius));
    },

    initCanvas() {
        let canvasBottom = this.$refs.canvasBottom;
        this.ctxBottom = canvasBottom.getContext('2d');
        this.routeInside = parseInt(this.cRadius) - parseInt(this.lineWidth)*1.5;
        this.routeOutside = parseInt(this.cRadius) - parseInt(this.lineWidth)/2;
//        this.drawCircle(this.ctxBottom,this.bgColor, 0.75*Math.PI, 2.25*Math.PI);
        this.drawCircle(this.ctxBottom,this.bgColorIn,this.routeInside, 0, 2*Math.PI);
        this.drawCircle(this.ctxBottom,this.bgColorOut,this.routeOutside, 0, 2*Math.PI);

        let canvas = this.$refs.canvas;
        this.ctx = canvas.getContext('2d');
    },

    drawCircle(ctx, color, route, startAngle, endAngle) {
        ctx.beginPath();
        ctx.lineWidth = this.lineWidth;
        ctx.lineCap = 'round';
        ctx.strokeStyle = color;
        ctx.arc(
            this.cRadius,
            this.cRadius,
            route,
            startAngle,
            endAngle
        );
        ctx.stroke();
    },
    paint(percent,color,route) {
        this.state = true;
        this.ctx.clearRect(0,0,2*parseInt(this.cRadius),2*parseInt(this.cRadius));
        let startAngle = Math.PI * -1/2;
        let endAngle = Math.PI * (-1/2 + percent *3/ 200);

        let count = startAngle;
        let timer = setInterval(()=>{
            if(count >= endAngle){
                clearInterval(timer)
                this.state = false;
                this.$emit('paintState',{state:'Completed'})
                return;
            }
            this.drawCircle(this.ctx, color,route, count, count+this.slice);
            this.text = parseInt((count-startAngle)/this.slice+1);
            count+=this.slice;
        },10);
    },


    onRateChange(){
        this.text = '0';
        this.cRate = 88; //改变cRate值
        console.log('state: '+this.state)
        if(this.state){}
        else{
            this.paint(this.cRate, this.cColor, this.routeInside);
        }
    },

    rToH(red, green, blue) {
        let redHex = red.toString(16);
        redHex = (redHex.length == 1 ? "0" + redHex : redHex);
        let greenHex = green.toString(16);
        greenHex = (greenHex.length == 1 ? "0" + greenHex : greenHex);
        let blueHex = blue.toString(16);
        blueHex = (blueHex.length == 1 ? "0" + blueHex : blueHex);
        return "#" + redHex + greenHex + blueHex;
    },
//      改变Canvas的位置
    changeCircle() {
//        console.log(JSON.stringify(this.$refs.canvas))
//        this.$refs.canvas.style.marginTop = '0px';
        this.ctx.clearRect(0,0,2*parseInt(this.cRadius),2*parseInt(this.cRadius));
        this.ctxBottom.clearRect(0,0,2*parseInt(this.cRadius),2*parseInt(this.cRadius));
//        this.ctx.translate(0,-100);
//        this.ctxBottom.translate(0,-100);
//        console.log('scale '+this.scale);
//        if(parseFloat(this.scale) > 0.8) {
//            this.ctx.scale(parseFloat(this.scale), parseFloat(this.scale));
//            this.ctxBottom.scale(parseFloat(this.scale), parseFloat(this.scale));
//            this.initCanvas()
//            this.drawCircle(this.ctxBottom, this.bgColorIn, this.routeInside, 0, 2 * Math.PI);
//            this.drawCircle(this.ctxBottom, this.bgColorOut, this.routeOutside, 0, 2 * Math.PI);
//            this.paint(this.cRate, this.cColor);
//        }
        let routeInside2 = this.routeInside * parseFloat(this.scale);
        let routeOutside2 = this.routeOutside * parseFloat(this.scale);
        this.drawCircle(this.ctxBottom, this.bgColorIn, routeInside2, 0, 2 * Math.PI);
        this.drawCircle(this.ctxBottom, this.bgColorOut, routeOutside2, 0, 2 * Math.PI);
        this.drawCircle(this.ctx, this.Color, routeInside2, 0, 2 * Math.PI);
    },
}
